<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的优惠券</title>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="./css/coupon.css">
</head>
<body>
<header class="aui-bar aui-bar-nav aui-bar-top">
    <a class="aui-pull-left aui-btn goBack" >
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">我的优惠券</div>
</header>
<section id="app">
    <keep-alive>
        <router-view></router-view>
    </keep-alive>
    <footer class="aui-bar aui-bar-tab" id="footer">
        <div class="aui-bar-tab-item aui-active goHome"  >
            <i class="aui-iconfont aui-icon-home"></i>
            <div class="aui-bar-tab-label">首页</div>
        </div>
        <div class="aui-bar-tab-item goShop">
            <i class="aui-iconfont aui-icon-cart"></i>
            <div class="aui-bar-tab-label">购物车</div>
        </div>
        <div class="aui-bar-tab-item goMyCenter" >
            <i class="aui-iconfont aui-icon-my"></i>
            <div class="aui-bar-tab-label">个人中心</div>
        </div>
    </footer>
</section>
<script type="text/javascript" src="../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../js/api.js"></script>
<script type="text/javascript" src="../../js/aui-tab.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../js/vue-router.min.js"></script>
<script type="text/javascript" src="../../js/aui-list-swipe-backup.js"></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../../js/weixin.js" ></script>
<script type="text/javascript">
    //未使用
    var weiShiYong = Vue.component('textIndent',{
        methods:{
            goWsy:function(){
                this.$router.push('/wsyCoupon')
            },
            goYsy:function(){
                this.$router.push('/ysyCoupon')
            },
            goYgq:function(){
                this.$router.push('/ygqCoupon')
            }

        },
        template:`
        <div>
         <div  class="aui-grid aui-margin-b-15">
            <div class="aui-tab" id="tab">
              <div class=" aui-tab-item aui-active" @click="goWsy()">
                <div class="aui-grid-label">未使用 </div>
            </div>
              <div class=" aui-tab-item " @click="goYsy()">
                <div class="aui-grid-label">已使用</div>
            </div>
              <div class=" aui-tab-item " @click="goYgq()">
                <div class="aui-grid-label">已过期</div>
            </div>
           </div>
         </div>
        <div class="aui-flex-col aui-flex-item-12 aui-padded-l-15 aui-bg-default">
            <div class="aui-flex-item-3">
              <img src="../../images/1.png" style="height:6rem" alt="">
            </div>
          <div class="aui-flex-item-9 aui-padded-l-15">
            <div class="aui-flex-row">
              <div class="aui-flex-item-12" style="height:3rem;line-height: 3rem">
                     <span class="aui-bg-warning ">满减券</span>
                     <span class="aui-font-size-16">双十二品牌狂欢</span>
                  </div>
                  <div class="aui-padded-r-10 dashed">
                     <span class="aui-font-size-12" style="height:1.5rem;line-height:1.5rem">2017.12.01-2118.01.01</span>
                     <span class=" aui-btn aui-btn-info aui-pull-right"> 立即使用 </span>
                  </div>
          </div>
               <div  class="aui-padded-r-10">
                  <span class="aui-font-size-12" style="height:1.5rem;line-height:1.5rem">指定商品可用</span>
                  <span class=" aui-pull-right">
                    <i class="aui-iconfont aui-icon-down"></i>
                   </span>
               </div>
          </div>
        </div>


        </div>
        `
    })
    //已使用
    var yiShiYong= Vue.component('textIndent',{
        methods:{
            goWsy:function(){
                this.$router.push('/wsyCoupon')
            },
            goYsy:function(){
                this.$router.push('/ysyCoupon')
            },
            goYgq:function(){
                this.$router.push('/ygqCoupon')
            }

        },
        template:`
        <div>
         <div  class="aui-grid aui-margin-b-15">
            <div class="aui-tab" id="tab">
              <div class=" aui-tab-item" @click="goWsy()">
                <div class="aui-grid-label">未使用 </div>
            </div>
              <div class=" aui-tab-item aui-active " @click="goYsy()">
                <div class="aui-grid-label">已使用</div>
            </div>
              <div class=" aui-tab-item " @click="goYgq()">
                <div class="aui-grid-label">已过期</div>
            </div>
           </div>
         </div>
        <div class="aui-flex-col aui-flex-item-12 aui-padded-l-15 aui-bg-default">
            <div class="aui-flex-item-3">
              <img src="../../images/1.png" style="height:6rem" alt="">
            </div>
          <div class="aui-flex-item-9 aui-padded-l-15">
            <div class="aui-flex-row">
              <div class="aui-flex-item-12" style="height:3rem;line-height: 3rem">
                     <span class="aui-bg-warning ">满减券</span>
                     <span class="aui-font-size-16">双十二品牌狂欢</span>
                  </div>
                  <div class="aui-padded-r-10 dashed">
                     <span class="aui-font-size-12" style="height:1.5rem;line-height:1.5rem">2017.12.01-2118.01.01</span>
                     <span class=" aui-btn aui-btn-default aui-pull-right"> 已使用 </span>
                  </div>
          </div>
               <div  class="aui-padded-r-10">
                  <span class="aui-font-size-12" style="height:1.5rem;line-height:1.5rem">指定商品可用</span>
                  <span class=" aui-pull-right">
                    <i class="aui-iconfont aui-icon-down"></i>
                   </span>
               </div>
          </div>
        </div>


        </div>
        `
    })
    //已过期
    var yiGuoQi = Vue.component('textIndent',{
        methods:{
            goWsy:function(){
                this.$router.push('/wsyCoupon')
            },
            goYsy:function(){
                this.$router.push('/ysyCoupon')
            },
            goYgq:function(){
                this.$router.push('/ygqCoupon')
            }

        },
        template:`
        <div>
         <div  class="aui-grid aui-margin-b-15">
            <div class="aui-tab" id="tab">
              <div class=" aui-tab-item" @click="goWsy()">
                <div class="aui-grid-label">未使用 </div>
            </div>
              <div class=" aui-tab-item " @click="goYsy()">
                <div class="aui-grid-label">已使用</div>
            </div>
              <div class=" aui-tab-item  aui-active" @click="goYgq()">
                <div class="aui-grid-label">已过期</div>
            </div>
           </div>
         </div>
        <div class="aui-flex-col aui-flex-item-12 aui-padded-l-15 aui-bg-default">
            <div class="aui-flex-item-3">
              <img src="../../images/1.png" style="height:6rem" alt="">
            </div>
          <div class="aui-flex-item-9 aui-padded-l-15">
            <div class="aui-flex-row">
              <div class="aui-flex-item-12" style="height:3rem;line-height: 3rem">
                     <span class="aui-bg-warning ">满减券</span>
                     <span class="aui-font-size-16">双十二品牌狂欢</span>
                  </div>
                  <div class="aui-padded-r-10 dashed">
                     <span class="aui-font-size-12" style="height:1.5rem;line-height:1.5rem">2017.12.01-2118.01.01</span>
                     <span class=" aui-btn aui-btn-default aui-pull-right"> 已过期 </span>
                  </div>
          </div>
               <div  class="aui-padded-r-10">
                  <span class="aui-font-size-12" style="height:1.5rem;line-height:1.5rem">指定商品可用</span>
                  <span class=" aui-pull-right">
                    <i class="aui-iconfont aui-icon-down"></i>
                   </span>
               </div>
          </div>
        </div>


        </div>
        `
    })

    //配置路由词典
    const myRoutes = [
//当path为空，相当于是指定页面打开时，默认要加载谁
        {path:'',component:weiShiYong},
        {path:'/wsyCoupon',component:weiShiYong},
        {path:'/ysyCoupon',component:yiShiYong},
        {path:'/ygqCoupon',component:yiGuoQi}
    ]
    const myRouter = new VueRouter({
        routes:myRoutes
    })
    var xpHome = new Vue({
        router:myRouter,
        el:'#app',
        data:{},
        methods: {
            goData: function () {//我的资料
                window.location.href = "";
            }
//            goOrderDetail:function(){//订单详情页
//                window.location.href = "../order_detail/order_detail.html";
//            }
        }
    });

</script>
</body>
</html>